<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<style>
th{font-weight:500;text-align:left}
</style>
<script src="../resource/jshow/js/jshow.utils.js"></script>
<div class="row" style="padding:2px">
	<div class="col-sm-12 col-md-4 col-lg-12">
		<div class="form-group">
			<%--<h5><label style="width:100%" for="h-input"> <span class="label  label-success"> 提示：可以项目签到信息</span> </label>--%>
			<%--</h5>--%>
				<div class="alert alert-warning">
					<i class="fa fa-fw fa-warning"></i>
					<strong>注意:</strong>
					请选择项目或人员，<span class="label label-danger">默认为不显示任何数据</span>。
				</div>
                <table class="table table-bordered ">
					<tbody>
					<tr>
						<th class="col-md-1 text-justify" >按项目筛选</th>
						<td class="col-md-5">
							<section  class="col col-md-12" style="padding-left: 0;">
								<label class="input col-md-10">
									<select name="proInfoId" id="select1" class="select2">
										<optgroup label="支持过滤查询">
										<option value="">请选择...</option>
										<s:iterator value="proInfoSet" id="list">
											<option value="<s:property value="#list.id"/>"><s:property value="#list.name"/></option>
										</s:iterator>
										</optgroup>
									</select>
								</label>
							</section>
						</td>

						<th class="col-md-1" >按人员筛选</th>
						<td class="col-md-5">
							<section  class="col col-12">
								<label class="input col-md-10">
									<select name="usersId" id="select2"  class="select2">
										<optgroup label="支持过滤查询">
										<option value="">请选择...</option>
										<s:iterator value="usersSet" id="list">
											<option  value="<s:property value="#list.id"/>" <s:property value="#list.selected"/> ><s:property value="#list.name"/></option>
										</s:iterator>
										</optgroup>
									</select>
								</label>
							</section></td>

					</tr>
					</tbody>
				</table>

        </div>
	</div>
</div>
<!-- row -->
<div class="row">

	<div class="col-sm-12 col-md-12 col-lg-12">

		<!-- new widget jarviswidget-color-blueDark-->
		<div class="jarviswidget ">
			<header style="height: 40px;">

				<span class="widget-icon"> <i class="fa fa-calendar"></i> </span>
				<h2 style="margin-top: -42px;"> 工作日历 </h2>
				<div class="widget-toolbar" style="margin-top: -30px;">
					<div class="btn-group">
						<span id="loading" style="display:none;font-size:14px;color:#03a9f4"><img src="../resource/com/img/loading-icon.gif" width="20" height="20"/>&nbsp;正在导出报表，请稍候...</span>
						<a id="ajax-export" class="btn btn-default btn-xs txt-color-white" href="javascript:void(0);">导出考勤报表</a>
					</div>
				    <div class="btn-group" id="ajax-group-button">
				        <a id="ajax-map-phone" type="1" class="btn btn-default btn-xs txt-color-white bg-color-greenLight" href="javascript:void(0);" > 正常 </a>
                    	<a id="ajax-comments-o" type="2" class="btn btn-default btn-xs txt-color-white bg-color-orange " href="javascript:void(0);" > 迟到 </a>
						<a id="ajax-map-leave" type="3" class="btn btn-default btn-xs txt-color-white bg-color-red " href="javascript:void(0);" > 请假</a>
						<input type="hidden" id="cal_type" />
                    </div>

					<!-- add: non-hidden - to disable auto hide -->
					<div class="btn-group">
						<button class="btn dropdown-toggle btn-xs btn-default" data-toggle="dropdown">
							日历显示范围 <i class="fa fa-caret-down"></i>
						</button>
						<ul class="dropdown-menu js-status-update pull-right">
							<li>
								<a href="javascript:void(0);" id="mt">月</a>
							</li>
							<li>
								<a href="javascript:void(0);" id="ag">周</a>
							</li>
							<li>
								<a href="javascript:void(0);" id="td">日</a>
							</li>
						</ul>
					</div>

				</div>
			</header>

			<!-- widget div-->
			<div>

				<div class="widget-body no-padding">
					<!-- content goes here -->
					<div class="widget-body-toolbar">


						<div id="calendar-buttons">

							<div class="btn-group">
								<a href="javascript:void(0)" class="btn btn-default btn-xs" id="btn-prev"><i class="fa fa-chevron-left"></i></a>
								<a href="javascript:void(0)" class="btn btn-default btn-xs" id="btn-next"><i class="fa fa-chevron-right"></i></a>
							</div>
						</div>


					</div>


					<div id="calendar"></div>

					<!-- end content -->
				</div>

			</div>
			<!-- end widget div -->
		</div>
		<!-- end widget -->

	</div>

<!-- end row -->
<div id="dialog-message">

</div><!-- #dialog-message -->

</div>
<script>
	$("select[name='proInfoId'],select[name='usersId']").off("change").on("change",function(e){
	    $('#cal_type').val("");
		$("#calendar").fullCalendar( 'refetchEvents');
		e.stopPropagation();
	})
    $('#ajax-group-button a').click(function(){
        $('#cal_type').val($(this).attr('type'));
        $("#calendar").fullCalendar( 'refetchEvents');
    });

</script>

<script type="text/javascript">
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	loadScript("../resource/com/js/plugin/fullcalendar/jquery.fullcalendar.min.js", iniCalendar);
    function iniCalendar() {
	    "use strict";

	    var date = new Date();
	    var d = date.getDate();
	    var m = date.getMonth();
	    var y = date.getFullYear();

	    var hdr = {
	        left: 'title',
	        center: 'month,agendaWeek,agendaDay',
	        right: 'prev,today,next'
	    };

	    var initDrag = function (e) {
	        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
	        // it doesn't need to have a start or end

	        var eventObject = {
	            title: $.trim(e.children().text()), // use the element's text as the event title
	            description: $.trim(e.children('span').attr('data-description')),
	            icon: $.trim(e.children('span').attr('data-icon')),
	            className: $.trim(e.children('span').attr('class')) // use the element's children as the event class
	        };
	        // store the Event Object in the DOM element so we can get to it later
	        e.data('eventObject', eventObject);

	        // make the event draggable using jQuery UI
	        e.draggable({
	            zIndex: 999,
	            revert: true, // will cause the event to go back to its
	            revertDuration: 0 //  original position after the drag
	        });
	    };

	    var addEvent = function (title, priority, description, icon) {
	        title = title.length === 0 ? "Untitled Event" : title;
	        description = description.length === 0 ? "No Description" : description;
	        icon = icon.length === 0 ? " " : icon;
	        priority = priority.length === 0 ? "label label-default" : priority;

	        var html = $('<li><span class="' + priority + '" data-description="' + description + '" data-icon="' +
	            icon + '">' + title + '</span></li>').prependTo('ul#external-events').hide().fadeIn();

	        $("#event-container").effect("highlight", 800);

	        initDrag(html);
	    };

	    /* initialize the external events
		 -----------------------------------------------------------------*/

	    $('#external-events > li').each(function () {
	        initDrag($(this));
	    });

	    $('#add-event').click(function () {
	        var title = $('#title').val(),
	            priority = $('input:radio[name=priority]:checked').val(),
	            description = $('#description').val(),
	            icon = $('input:radio[name=iconselect]:checked').val();

	        addEvent(title, priority, description, icon);
	    });

	    /* initialize the calendar
		 -----------------------------------------------------------------*/

	    $('#calendar').fullCalendar({

	        header: hdr,

	     	// display
	    	defaultView: 'month',
	    	aspectRatio: 1.35,
	    	weekends: true,

	    	allDayDefault: true,
	    	ignoreTimezone: true,

	    	// event ajax
	    	lazyFetching: true,
	    	startParam: 'start',
	    	endParam: 'end',

	    	// time formats
	    	titleFormat: {
	    		month: 'MMMM yyyy',
	    		week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}",
	    		day: 'dddd, MMM d, yyyy'
	    	},
	    	columnFormat: {
	    		month: 'ddd',
	    		week: 'ddd M/d',
	    		day: 'dddd M/d'
	    	},
	    	timeFormat: { // for event elements
	    		'': 'h(:mm)t' // default
	    	},

	    	// locale
	    	isRTL: false,
	    	firstDay: 0,
	    	monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
	    	monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
	    	dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
	    	dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
	    	buttonText: {
	    		prev: '&nbsp;&#9668;&nbsp;',
	    		next: '&nbsp;&#9658;&nbsp;',
	    		prevYear: '&nbsp;&lt;&lt;&nbsp;',
	    		nextYear: '&nbsp;&gt;&gt;&nbsp;',
	    		today: '今天',
	    		month: '一月',
	    		week: '一周',
	    		day: '一天',
	    		create:'新建日程'
	    	},

	    	// jquery-ui theming
	    	theme: false,

	    	//selectable: false,
	    	unselectAuto: true,

	    	dropAccept: '*',
	    	//-------------------------------------
	        editable: false,
	        droppable: false, // this allows things to be dropped onto the calendar !!!

	        drop: function (date, allDay) { // this function is called when something is dropped
				return ;
	            // retrieve the dropped element's stored Event Object
	            var originalEventObject = $(this).data('eventObject');

	            // we need to copy it, so that multiple events don't have a reference to the same object
	            var copiedEventObject = $.extend({}, originalEventObject);

	            // assign it the date that was reported
	            copiedEventObject.start = date;
	            copiedEventObject.allDay = allDay;

	            // render the event on the calendar
	            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
	            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

	            // is the "remove after drop" checkbox checked?
	            if ($('#drop-remove').is(':checked')) {
	                // if so, remove the element from the "Draggable Events" list
	                $(this).remove();
	            }

	        },

	        select: function (start, end, allDay) {

	            var title = prompt('Event Title:');
	            if (title) {
	                calendar.fullCalendar('renderEvent', {
	                        title: title,
	                        start: start,
	                        end: end,
	                        allDay: allDay
	                    }, true // make the event "stick"
	                );
	            }
	            calendar.fullCalendar('unselect');
	        },
			eventClick: function(calEvent, jsEvent, view) {
				loadTaskInfo(calEvent);
			    // change the border color just for fun
			    $(this).css('border-color', 'red');
			},
	        events:function(start,end,callback){
				var url ="ajax-calendar!taskData.action";
				var data= {
					start: start.getTime(),
					end: end.getTime(),
					proInfoId:$("select[name='proInfoId']").val(),
					usersId:$("select[name='usersId']").val(),
					type:$('#cal_type').val()
				}
				$.ajax({
					url : url,
					method:"post",
					cache : false,
					dataType : "json",
					data : data,
					success : function(data) {

						callback(data);
					}
				});

			},

	        eventRender: function (event, element, icon) {
	            if (!event.description == "") {
	                element.find('.fc-event-title').append("<br/><span class='ultra-light'>" +event.description +
	                    "</span>");
	            }
	            if (!event.icon == "") {
	                element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
	                    " '></i>");
	            }
	        },

	        windowResize: function (event, ui) {
                $('#calendar').fullCalendar('updateEvent', event);
	        }
	    });

	    /* hide default buttons */
	    $('.fc-header-right, .fc-header-center').hide();
	}


	$('#calendar-buttons #btn-prev').click(function () {
	    $('.fc-button-prev').click();
	    return false;
	});

	$('#calendar-buttons #btn-next').click(function () {
	    $('.fc-button-next').click();
	    return false;
	});

	$('#calendar-buttons #btn-today').click(function () {
	    $('.fc-button-today').click();
	    return false;
	});

	$('#mt').click(function () {
	    $('#calendar').fullCalendar('changeView', 'month');
	});

	$('#ag').click(function () {
	    $('#calendar').fullCalendar('changeView', 'basicWeek');
	});

	$('#td').click(function () {
	    $('#calendar').fullCalendar('changeView', 'basicDay');
	});
	function loadTaskInfo(event) {
	    var url=event.linkUrl;
        gDialog.fCreate({
            title:'签到记录',
            url:url,
            width:500
        }).show();
	};


	$(function(){
		$("#ajax-export").click(function(){
			var str = $(".fc-header-title").children("h2").text();
			var arr = str.split(" ");
			var year = arr[1];
			var month = exchangeMonth(arr[0]);
			var projectId = $("#select1").val();

			//$('#loading').show();
			//$('#ajax-export').hide();
			$.tzDialog({title:"确定提示",content:"报表已导出，确认之后将下载文档",callback:function(ok){
				if(ok){
					$('#data_loading').show();
					$.ajax({
						type : "POST",
						url : "ajax-calendar!exportFile.action",
						dataType : 'text',
						data : {"exportProInfoId":projectId,"year":year,"month":month},
						cache : false,
						async:true,
						success:function(data){
							if(data != ""){
								//$('#loading').hide();
								//$('#ajax-export').show();
								$('#data_loading').hide();
								location.href = "ajax-calendar!downloadFile.action?realPath="+data ;
							}
						}
					});

				} else {

				}
			}});



		});
	});


	function exchangeMonth(str){
		switch(str){
			case "一月":return "1";
			case "二月":return "2";
			case "三月":return "3";
			case "四月":return "4";
			case "五月":return "5";
			case "六月":return "6";
			case "七月":return "7";
			case "八月":return "8";
			case "九月":return "9";
			case "十月":return "10";
			case "十一月":return "11";
			case "十二月":return "12";
		}
	}
</script>
